<template>
    <el-card>
        <div slot="header">
            <el-steps :active="activeStep" simple>
                <el-step 
                    :title="item.title"
                    :icon="item.icon"
                    @click.native="activeStep = index"
                    v-for="(item, index) in steps"
                    :key="index"
                ></el-step>
            </el-steps>
        </div>
        <el-form label-width="80px">
            <div v-show="activeStep === 0">
                <el-form-item label="课程名称">
                    <el-input v-model="course.courseName"></el-input>
                </el-form-item>
                <el-form-item label="简介">
                    <el-input v-model="course.brief"></el-input>
                </el-form-item>
                <el-form-item label="讲师姓名">
                    <el-input v-model="course.teacherDTO.teacherName"></el-input>
                </el-form-item>
                <el-form-item label="职位">
                    <el-input v-model="course.teacherDTO.position"></el-input>
                </el-form-item>
                <el-form-item label="讲师简介">
                    <el-input v-model="course.teacherDTO.description"></el-input>
                </el-form-item>
                <el-form-item label="课程描述">
                    <el-input style="margin-bottom: 20px" placeholder="概述1" v-model="course.previewFirstField"></el-input>
                    <el-input placeholder="概述2" v-model="course.previewSecondField"></el-input>
                </el-form-item>
                <el-form-item label="课程排序">
                    <el-input-number label="课程排序" v-model="course.sortNum"></el-input-number>
                </el-form-item>
            </div>
            <div v-show="activeStep === 1">
                <el-form-item label="课程封面">
                    <!--
                        上传文件组件，它支持自动上传，只需要把上传需要的参数配置一下
                    -->
                    <!-- <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                        :http-request="handleUpload">
                        <img v-if="course.courseListImg" :src="course.courseListImg" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload> -->
                    <!--
                        1. 组件需要根据绑定的数据进行图片预览
                        2. 组件需要把上传成功的图片地址同步到绑定的数据中
                        v-model 的本质还是父子组件通讯
                        1. 它会给子组件传递一个名字叫 value 的 数据 (props)
                        2. 默认监听 input 事件，修改绑定的数据 (自定义事件) 
                    -->
                    <course-image v-model="course.courseListImg" />
                </el-form-item>
                <el-form-item label="介绍封面">
                    <course-image :limit="5" v-model="course.courseImgUrl" />
                </el-form-item>
            </div>
            <div v-show="activeStep === 2">
                <el-form-item label="售卖价格">
                    <el-input v-model="course.sales">
                        <template slot="price">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="商品原价">
                    <el-input v-model="course.price">
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="销量">
                    <el-input v-model="course.discounts">
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="活动标签">
                    <el-input v-model="course.discountsTag"></el-input>
                </el-form-item>
            </div>
            <div v-show="activeStep === 3">
                <el-form-item label="现时秒杀开关">
                    <el-switch
                        v-model="course.activityCourse"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
                <template v-if="course.activityCourse">
                    <el-form-item label="开始时间">
                        <el-date-picker
                            v-model="course.activityCourseDTO.beginTime"
                            type="datetime"
                            placeholder="选择日期时间"
                            value-format="yy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间">
                        <el-date-picker
                            v-model="course.activityCourseDTO.endTime"
                            type="datetime"
                            placeholder="选择日期时间"
                            value-format="yy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="秒杀价">
                        <el-input v-model="course.activityCourseDTO.amount">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="秒杀库存">
                        <el-input v-model="course.activityCourseDTO.stock">
                            <template slot="append">个</template>
                        </el-input>
                    </el-form-item>
                </template>
            </div>
            <div v-show="activeStep === 4">
                <el-form-item label="课程详情">
                    <text-editor v-model="course.courseDescriptionMarkDown" />
                </el-form-item>
                <el-form-item  label="是否上架">
                    <el-switch
                        v-model="course.status"
                        :active-value="1"
                        :inactive-value="0"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSave">保存</el-button>
                </el-form-item>
            </div>
            <el-form-item v-if="activeStep >= 0 && activeStep < 4">
                <el-button @click="activeStep++">下一步</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script lang="ts">
import Vue from 'vue'
import CourseImage from './CourseImage.vue'
import { saveOrUpdateCourse, getCourseById } from '@/services/course'
import TextEditor from '@/components/TextEditor/index.vue'
import moment from 'moment'

export default Vue.extend({
    name: 'CreateOrUpdate',
    props: {
        isEdit: {
            type: Boolean,
            default: false
        },
        courseId: {
            type: [String, Number]
        }
    },
    data () {
        return {
            activeStep: 0,
            steps: [
                { title: '基本信息', icon: 'el-icon-edit' },
                { title: '课程封面', icon: 'el-icon-upload' },
                { title: '销售信息', icon: 'el-icon-picture' },
                { title: '秒杀活动', icon: 'el-icon-picture' },
                { title: '课程详情', icon: 'el-icon-picture' }
            ],
            imageUrl: '', // 预览图片地址
            isSeckill: false,
            course: {
                id: 0,
                courseName: '',
                brief: '',
                teacherDTO: {
                    id: 0,
                    courseId: 0,
                    teacherName: '',
                    teacherHeadPicUrl: '',
                    position: '',
                    description: ''
                },
                courseDescriptionMarkDown: '',
                price: 0,
                discounts: 0,
                priceTag: '',
                discountsTag: '',
                isNew: true,
                isNewDes: '',
                courseListImg: '',
                courseImgUrl: '',
                sortNum: 0,
                previewFirstField: '',
                previewSecondField: '',
                status: 0, // 0 未上架  1 上架
                sales: 0,
                activityCourse: false, // 是否开启秒杀活动
                activityCourseDTO: {
                    id: 0,
                    courseId: 0,
                    beginTime: '',
                    endTime: '',
                    amount: 0,
                    stock: 0
                },
                autoOnlineTime: ''
            }
        }
    },
    methods: { 
        async handleSave () {
            const { data } = await saveOrUpdateCourse(this.course)
            if (data.code === '000000') {
                this.$router.push({
                    name: 'course'
                })
            }
        },

        async loadCourse() {
            const { data } = await getCourseById(this.courseId)
            const { activityCourseDTO } = data.data
            if (activityCourseDTO) {
                activityCourseDTO.beginTime = moment(activityCourseDTO.beginTime).format('YYYY-MM-DD')
                activityCourseDTO.endTime = moment(activityCourseDTO.endTime).format('YYYY-MM-DD')
            }
            
            if (data.code === '000000') {
                this.course = data.data
            }
        }
    },
    components: {
        CourseImage,
        TextEditor
    },
    created () {
        if (this.isEdit) {
            this.loadCourse()
        }
    }
})
</script>

<style lang="scss" scoped>
    
</style>